<template>
  <view class="container">
    <view class="header">
      <view class="mb-30">当前{{ title }}</view>
      <view class="value" v-if="type == 0">{{ info.quota }}</view>
      <view class="value" v-else-if="type == 1">{{ info.balanceQuota }}</view>
      <view class="value" v-else-if="type == 2">{{ info.cash }}</view>
    </view>
    <view class="flex-fill overflow-hidden">
      <view class="content" v-if="!scores.length">
        <view class="top">{{ title }}</view>
        <view class="flex-fill d-flex align-items-center just-content-center"> 暂无{{ title }} </view>
      </view>
      <scroll-view class="content" scroll-y v-else>
        <view class="top">{{ title }}</view>
        <list-cell v-for="(score, index) in scores" :key="index">
          <view class="score">
            <view class="left">
              <view class="title mb-10">{{ score.detailed }}</view>
              <view>{{ score.createTime }}</view>
            </view>
            <view class="right">
              <view class="title mb-10">{{ score.balance }}</view>
              <view>
                {{ score.inOut == 1 ? "-" : "+" }}
                <text>{{ score.amount }}</text>
              </view>
            </view>
          </view>
        </list-cell>
        <nomore :visible="!loading" :line="false" :text="`没有更多${title}了~`"></nomore>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import listCell from "@/components/list-cell/list-cell.vue";
import nomore from "@/components/nomore/nomore.vue";
import { transferRecord, getUserInfo } from "@/api";

export default {
  components: {
    listCell,
    nomore,
  },
  computed: {},
  data() {
    return {
      scores: [],
      loading: true,
      info: {},
      type: 0,
      title: "积分记录",
    };
  },
  onLoad(options) {
    this.type = options.type;
    this.title = options.title;

    uni.setNavigationBarTitle({ title: this.title });

    this.userInfo();
    this.getData();
  },
  methods: {
    async userInfo() {
      let res = await getUserInfo();
      if (res.code == 200) {
        this.info = res.data;
      }
    },
    async getData() {
      let res = await transferRecord({ type: this.type });
      if (res.code == 200) {
        console.log("res", res);
        this.scores = res.data.records;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  margin-bottom: 20rpx;
  background-color: $bg-color-white;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30rpx 40rpx;
  font-size: $font-size-medium;
  color: $text-color-base;

  .value {
    font-size: 64rpx;
    color: $color-primary;
    font-weight: 500;
    margin-bottom: 30rpx;
  }

  .rules {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .rules-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
  }
}

.content {
  width: 100%;
  height: 100%;
  background-color: $bg-color-white;
  display: flex;
  flex-direction: column;

  .top {
    padding: 20rpx 30rpx;
    font-size: $font-size-lg;
    font-weight: 500;
  }

  .score {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      font-size: $font-size-sm;
      color: $text-color-assist;

      .title {
        font-size: $font-size-lg;
        color: $text-color-base;
        margin-bottom: 10rpx;
      }
    }

    .right {
      font-size: $font-size-lg;
      color: $color-primary;
    }
  }
}
</style>
